<template>
  <div class="modal-overlay" tabindex="0" @keyup.esc="cancel">
    <div class="event-edit-card">
      <h2>{{ event.id ? '编辑活动' : '添加新活动' }}</h2>
      <form @submit.prevent="submitForm">
        <!-- 标题 -->
        <div class="form-group">
          <input type="text" id="title" v-model="form.title" placeholder="活动标题" required>
        </div>

        <!-- 活动概述 -->
        <div class="form-group">
          <textarea id="summary" v-model="form.summary" placeholder="活动概述" style="height: 5vh;"></textarea>
        </div>

        <!-- 活动描述 -->
        <div class="form-group">
          <textarea id="detail" v-model="form.detail" placeholder="活动描述"style="height: 10vh;" ></textarea>
        </div>

        <!-- 开始日期 -->
        <div class="form-group">
          <input type="date" id="start_date" v-model="form.start_date" placeholder="开始日期" required>
        </div>

        <!-- 结束日期 -->
        <div class="form-group">
          <input type="date" id="end_date" v-model="form.end_date" placeholder="结束日期" required>
        </div>

        <!-- 图片上传 -->
        <div class="form-group">
          <label for="image_upload">上传活动图片</label>
          <input type="file" id="image_upload" @change="handleFileUpload">
        </div>
        <!-- 表单操作按钮 -->
        <div class="form-actions">
          <button type="submit" class="save-btn">保存</button>
          <button type="button" class="cancel-btn" @click="cancel">取消</button>
        </div>
      </form>
    </div>
  </div>
</template>


<script>
export default {
  props: {
    event: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      form: {
        title: '',
        summary: '',
        detail: '',
        start_date: '',
        end_date: '',
        image_url: '',
        selectedFile: null,

      }
    };
  },
  watch: {
    event: {
      immediate: true,
      handler(newValue) {
        if (newValue) {
          this.form = { ...newValue };
        } else {
          this.form = { title: '', summary: '', detail: '', start_date: '', end_date: '', image_url: '' };
        }
      }
    }
  },
  methods: {
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0];
      // 可以在这里添加上传逻辑，或者在submitForm中处理
    },

    submitForm() {
      // 如果有选择文件，上传文件
      if (this.selectedFile) {
        const formData = new FormData();
        formData.append('file', this.selectedFile);

        // 上传逻辑，可以使用 Axios 或其他 HTTP 客户端
        uploadImage(formData).then(response => {
          // 假设上传成功后，服务器返回新的图片 URL
          this.form.image_url = response.data.url;
          this.saveEvent();
        }).catch(error => {
          console.error('上传失败:', error);
        });
      } else {
        // 如果没有选择文件，直接保存事件
        this.saveEvent();
      }
    },

    saveEvent() {
      // 触发父组件的保存事件
      this.$emit('save', this.form);
    },
    cancel() {
      this.$emit('close');
    },

    handleEventChange(event) {

      console.log(event)
      this.form = event ? { ...event } : { title: '', summary: '', detail: '', start_date: '', end_date: '' };
      console.log("test: "+form)

    },


  },
  mounted() {
    this.handleEventChange(this.event);
    this.$nextTick(() => {
      this.$el.focus();
    });
  }


};
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.event-edit-card {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 500px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group input[type="text"],
.form-group input[type="date"],
.form-group textarea {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}

.form-actions {
  text-align: right;
}

.save-btn,
.cancel-btn {
  padding: 10px 20px;
  margin: 5px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.save-btn {
  background-color: #4CAF50;
  color: white;
}

.cancel-btn {
  background-color: #f44336;
  color: white;
}

/* 可能需要根据需要添加或调整其他样式 */
</style>
